<template>
<div class="heatmap">
  <h3>文章日历</h3>
    <div >
    <calendar-heatmap
      :values="values"
      :endDate="endDate"
      :max="10"
      :range-color="color"
    ></calendar-heatmap>
  </div>
</div>

</template>
<script>
import getCalenderDate from '@/netWork/getCalenderDate';
export default {
  name: "Calender",
  data() {
    return {
      color:[
        '#ebedf0',
        '#4784ba',
        '#386ea6',
        '#2b5b97',
        '#123676',
        '#052465',
      ],
      endDate:"2022-5-22",
      values:[
        { date: '2021-9-22', count: 6 }
      ]
    };
  },
  created() {
    //获取时间日期
    getCalenderDate().then(res=>{
      this.values =res.data;
      //设置最后显示时间
      this.endDate = this.values[this.values .length-1].date;
    })
  },
};
</script>
<style scoped>
.heatmap {
  position: relative;
  box-sizing: border-box;
  width: 800px;
  margin: 0 auto;
  margin-top: -50px;
  padding:0px 20px 40px;
  box-shadow: var(--shadow);
  border-radius: 10px;
  background: #fff;
  
}
.heatmap h3{
  padding: 20px 0;
  text-align: center;
}
</style>